<template >
  <span>
    <el-button
      :size="qwe"
      :type="qwt"
      @click="dialogFormVisible = true"
      round
      >{{ qwr }}</el-button
    >

    <el-dialog
      :title="qwy"
      width="30%"
      class="div1"
      :visible.sync="dialogFormVisible"
    >
      <el-form ref="tableData" :model="tableData" label-width="80px">
        <el-form-item label="员工姓名">
          <el-input v-model="tableData.name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="tableData.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="tableData.pwd"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="tableData.identity" placeholder="请选择员工角色">
            <el-option
              :label="item.addcent"
              :value="item.addcent"
              v-for="item in intldentityCent"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="data1">取 消</el-button>
        <el-button type="primary" @click="data2">确 定</el-button>
      </div>
    </el-dialog>
  </span>
</template>

<script>
import { identity } from "../http/staff";
export default {
  name: "ModalBox",
  props: ["qwe", "qwr", "qwt", "qwy", "qwu", "qwi"],
  data() {
    return {
      tableData: {},
      dialogTableVisible: false,
      dialogFormVisible: false,

      formLabelWidth: "120px",
      intldentityCent: [],
    };
  },
  created() {
    this.tableData = { ...this.qwu };
    this.intldentity();
  },
  methods: {
    intldentity() {
      identity()
        .then((res) => {
          let box1 = [];
          let cent = res.data.data;
          for (let i = 0; i < cent.length; i++) {
            let box2 = {
              id: i,
              addcent: cent[i],
            };
            box1.push(box2);
          }
          this.intldentityCent = box1;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    data1() {
      this.dialogFormVisible = false;
    },
    data2() {
      this.dialogFormVisible = false;
      this.$emit("dataEvent2", this.tableData);
    },
  },
};
</script>

<style scoped lang="scss">
span {
  padding-left: 10px;
}
.div1 {
  text-align: left;
}
</style>
